/* stylelint-disable no-invalid-position-at-import-rule */
@layer utilities.icons, utilities.components;
@layer components.base, utilities.components.mod1, utilities.components.mod2;

@plugin 'phosphor-icons-tailwindcss' {
	prefix: i;
	/* stylelint-disable-next-line property-no-unknown, order/properties-order  */
	layer: icons;
	/* stylelint-disable-next-line property-no-unknown, order/properties-order  */
	custom-property: --icon-url;
}

/* ad-hoc custom media and selectors */
@import './medias.css';
@import './selectors.css';

/* tailwind customization */
@import './theme/index.css';
@import './icons/index.css';
@import './utilities/index.css';
@import './components/index.css';

@layer base {
	html {
		font-family: var(--font-inter);
		color: var(--color-fg);

		background-color: var(--color-bg);
		border-color: currentcolor;
		border-color: var(--color-outline);
	}

	* {
		border-color: inherit;
	}

	button,
	input {
		padding-block: 0;
		padding-inline: 0;

		color: inherit;

		background-color: transparent;
		border-color: transparent;
		border-radius: 0;
	}

	svg[inline-src^='simpleicon/'] {
		fill: currentcolor;
	}

	button:focus-visible:not(:--disabled),
	label:has(input:focus-visible) {
		outline: 1.5px solid var(--color-outline-focus);
		outline-offset: 1px;
	}
}

@variant current {
	&:--current {
		@slot;
	}
}
